<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="styles/simditor.css" />
		<script src="jquery.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
		<script type="text/javascript" src="scripts/module.min.js"></script>
		<script type="text/javascript" src="scripts/hotkeys.min.js"></script>
		<script type="text/javascript" src="scripts/uploader.min.js"></script>
		<script type="text/javascript" src="scripts/simditor.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.col-md-3 img {
				width: 40px;
				height: 40px;
			}
			
			.container a {
				text-decoration: none;
			}
			
			.btn {
				padding: 6px 10px;
			}
			
			.novels a {
				width: 150px;
				height: ;
				margin-right: 40px;
				margin-bottom: 10px;
				border: solid 1px;
				height: 250px;
				display: inline-block;
			}
			
			.novels a img {
				width: 100%;
				height: 200px;
				margin: auto;
				display: block;
			}
			
			.novels a p {
				text-align: center;
				line-height: 36px;
			}
			
			.topbtn {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				border: solid 1px;
				line-height: 100px;
				text-align: center;
				font-size: 20px;
				position: fixed;
				right: 20px;
				bottom: 50px;
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="row" style="background: #ff6600;height: 60px;">
				<div class="col-md-3" style="line-height: 60px;font-size: 20px;">
					<img src="" id="user_img" />
					<span id="user_text" style="color: white;" data-uid="0"></span>
				</div>
				<div class="col-md-2 col-md-offset-5" style="line-height: 60px;font-size: 20px; color: white;" id="type_l">
					<span data-toggle="modal" data-target="#login_in">登录</span> /
					<span data-toggle="modal" data-target="#login_up">注册</span>
				</div>
				<div class="col-md-3 col-md-offset-6" style="line-height: 60px;font-size: 20px;display: none;" id="type_t">
					<span class="btn btn-info" id="t_btn">
						退出登陆
					</span>
					<span class="btn btn-info" id="center">
						<a href="" style="color: white;">个人中心</a>
					</span>
					<span class="btn btn-info" id="soucang">
						<a href="" style="color: white;">我的收藏</a>
					</span>
				</div>
			</div>
			<div class="row">
				<div class="form-group">
					<div class="input-group" style="margin-top: 20px;">
						<input type="text" class="form-control" id="search" placeholder="搜索小说">
						<div class="input-group-addon" id="search_btn" style="background: #ff6600; color: white;"> 搜索 </div>
					</div>
				</div>
				<div class="novels">

				</div>
				<div class="topbtn">回到开始</div>
			</div>
		</div>
		<!--登录-->
		<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="login_in">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">登录</h4>
					</div>
					<div class="modal-body">
						<div class="form-group">
							<label for="user">账号</label>
							<input type="text" class="form-control" id="user_in" placeholder="账号">
						</div>
						<div class="form-group">
							<label for="pass">密码</label>
							<input type="password" class="form-control" id="pass_in" placeholder="密码">
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" id="btn_in">确定</button>
					</div>
				</div>
			</div>
		</div>
		<!--结束-->
		<!--注册-->
		<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="login_up">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">注册</h4>
					</div>
					<div class="modal-body">
						<div class="form-group">
							<img id="img_up" src="" style="width: 60px; height: 60px;display: block;margin: auto;" />
							<input type="file" name="img_file" id="img_file" value="" />
						</div>
						<div class="form-group">
							<label for="user">昵称</label>
							<input type="text" class="form-control" id="names" placeholder="昵称">
						</div>
						<div class="form-group">
							<label for="user">账号</label>
							<input type="text" class="form-control" id="user_up" placeholder="账号">
						</div>
						<div class="form-group">
							<label for="pass">密码</label>
							<input type="password" class="form-control" id="pass_up" placeholder="密码">
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" id="btn_up">确定</button>
					</div>
				</div>
			</div>
		</div>

		<!--结束-->
		<script type="text/javascript">
			var href = 'http://localhost:8000'
			if(localStorage.user) {
				user_text.innerText = localStorage.user
				$('#user_img').attr('src', localStorage.img)
				$('#user_text').attr('data-uid', localStorage.uid)
				$('#user_text').attr('data-user', localStorage.user)
				type_l.style.display = 'none'
				type_t.style.display = 'block'
			}
			$.ajax({
				type: "post",
				url: href + "/users/hot",
				success(data) {
					console.log(data)
//					data.forEach(function(o, i) {
					for(var i=0; i<6; i++){
						var oA = $('<a>').attr('uid', data[i].uid)
						oA.append($('<img>').attr('src', data[i].novelimg)).append($('<p>').html(data[i].novelname))
						$('.novels').append(oA)
					}
						
//					})
				}
			});
			$('.novels').on('click', 'a', function() {
				var _this = $(this)
				var suid = ''
				if(localStorage.user) {
					var str = href + '/xiang.html?uid=' + _this.attr('uid')
					suid = _this.attr('uid')
					_this.attr('href', str)
				} else {
					$('#login_in').modal('show')
				}
				$.ajax({
					type: "post",
					url: href + "/users/tj",
					data: {
						loginuid: $('#user_text').attr('data-uid'),
						suid: suid
					},
					success(data) {
						console.log(data)
					}
				});
			})
			var img_url = ''
			//上传头像
			img_file.onchange = function() {
				var f = img_file.files[0]
				var d = new FormData
				d.append('img', f)
				$.ajax({
					type: "post",
					url: href + "/files/img",
					data: d,
					contentType: false,
					processData: false,
					success(data) {
						console.log(data)
						img_url = href + data
						$('#img_up').attr('src', img_url)
					}
				});
			}

			//注册
			btn_up.onclick = function() {
				if(user_up.value == '' || pass_up.value == '' || names.value == '') {
					alert('不能为空')
				} else if(/[\u4E00-\u9FA5]/g.test(user_up.value) || /[\u4E00-\u9FA5]/g.test(pass_up.value)) {
					alert('不能出现中文')
				} else if(!(/^[1][3,4,5,7,8][0-9]{9}$/.test(user_up.value))) {
					alert('请输入正确手机号')
				} else {
					$.ajax({
						type: "post",
						url: href + "/users/up",
						data: {
							name: names.value,
							user: user_up.value,
							pass: pass_up.value,
							img: img_url
						},
						success(data) {
							console.log(data)
							names.value = ''
							user_up.value = ''
							pass_up.value = ''
							$('#login_up').modal('hide')
						}
					});
				}
			}
			//登录
			btn_in.onclick = function() {
				if(user_in.value == '' || pass_in.value == '') {
					alert('不能为空')
				} else if(/[\u4E00-\u9FA5]/g.test(user_in.value) || /[\u4E00-\u9FA5]/g.test(pass_in.value)) {
					alert('不能出现中文')
				} else if(!(/^[1][3,4,5,7,8][0-9]{9}$/.test(user_in.value))) {
					alert('请输入正确手机号')
				} else {
					$.ajax({
						type: "post",
						url: href + "/users/in",
						data: {
							user: user_in.value,
							pass: pass_in.value,

						},
						success(data) {
							console.log(data)
							user_in.value = ''
							pass_in.value = ''
							$(user_img).attr('src', data.img)
							user_text.innerHTML = data.user
							localStorage.user = data.user
							localStorage.uid = data.uid
							localStorage.img = data.img
							$('#user_text').attr('data-uid', data.uid)
							$('#user_text').attr('data-user', data.user)
							type_t.style.display = 'block'
							type_l.style.display = 'none'
							$('#login_in').modal('hide')
						}
					});
				}
			}

			//退出用户
			t_btn.onclick = function() {
				user_text.innerHTML = ''
				$(user_img).attr('src', '')
				type_t.style.display = 'none'
				type_l.style.display = 'block'
				localStorage.clear('user')
				localStorage.clear('uid')
				localStorage.clear('img')
			}

			$('#search_btn').on('click', function() {
				if(search.value == '') {
					alert('不能为空')
				} else {
					$('.novels').html('')
					$.ajax({
						type: "post",
						url: href + "/users/sou",
						data: {
							names: $('#search').val()
						},
						success(data) {
							console.log(data)
							data.forEach(function(o, i) {
								var oA = $('<a>').attr('uid', data[i].uid)
								oA.append($('<img>').attr('src', data[i].novelimg)).append($('<p>').html(data[i].novelname))
								$('.novels').append(oA)
							})
							$('.topbtn').css({
								display: 'block'
							})
							$('#search').val('')
						}
					});
				}

			})
			$('.topbtn').on('click', function() {
				$('.novels').html('')
				$.ajax({
					type: "post",
					url: href + "/users/hot",
					success(data) {
						console.log(data)
						//					var str = ''
						data.forEach(function(o, i) {
							var oA = $('<a>').attr('uid', data[i].uid)
							oA.append($('<img>').attr('src', data[i].novelimg)).append($('<p>').html(data[i].novelname))
							$('.novels').append(oA)
						})
						$('.topbtn').css({
							display: 'none'
						})
					}
				});
			})
			$('#center').on('click', function() {
				var loginuid = $('#user_text').attr('data-uid')
				var author = $('#user_text').attr('data-user')
				$('#center a').attr('href', href + '/shu.html?loginuid=' + loginuid + '&user=' + author)
			})
			$('#soucang').on('click','a',function(){
				$(this).attr('href',href+'/souc.html')
			})
		</script>
	</body>

</html>